<template>
	<view class="question-result">
		<view class="info">
			<view class="name">陈小小</view>
			<view class="data">总分： 100 分</view>
			<view class="data">题数：{{dataObj.sumQuestionNumber || '0'}} 道</view>
			<view class="data">用时：{{dataObj.remainExamTime || '-'}}</view>
			<view class="score"><span class="number">92</span>分</view>
			<view class="tips">您的考试得分</view>
		</view>
		<view class="block">
			<view class="test-title">{{pageObj.title}}</view>
			<view class="test-name">试卷名称</view>
			<view class="result">
				<view class="result-item right">
					<view class="text">答对</view>
					<view class="number">30</view>
				</view>
				<view class="result-item wrong">
					<view class="text">答错</view>
					<view class="number">4</view>
				</view>
			</view>
			<view class="btn">
				<view class="btn-item left" @click="onNextTap">查看答案</view>
				<view class="btn-item right" @click="onGoHomeTap">返回首页</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { requestErrorTip, loginExam } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				pageObj: {
					examId: '',
					title: ''
				},
				dataObj: {
					sumQuestionNumber: ''
				}
			}
		},
		onLoad(event) {
			const title = event['title']; // 获取科目名称
			this.pageObj['examId'] = event['examId']; // 获取考试id
			this.pageObj['title'] = event['title']; // 获取考试id
			uni.setNavigationBarTitle({
			　　title: title
			});
			this.getData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 查看答案
			onNextTap() {
				uni.navigateTo({
					url: './answer?examId=' + this.pageObj['examId'] + '&title=' + this.pageObj['title']
				});
			},
			// 返回首页
			onGoHomeTap() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			// 获取数据
			getData() {
				this.$Requset({
					url: this.$Api['exam']['getExamQuestionInfo'],
					data: {
						token_exam: uni.getStorageSync('examToken'),
						studentId: uni.getStorageSync('studentId'),
						examId: this.pageObj['examId']
					},
					success: (res) => {
						const { data, status, message } = res;
						if (status !== 300) {
							requestErrorTip('toast', message);
							return;
						}
						if (status === 103) {
							const userInfo = uni.getStorageSync('userInfo');
							const mobile = userInfo['mobile'];
							loginExam(mobile, () => {
								this.getData();
							});
							return;
						}
						this.dataObj = data;
						this.changeRemainExamTime();
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 转换时间
			changeRemainExamTime() {
				const allTime = this.dataObj['remainExamSecond'];
				const hour = parseInt(allTime / 3600);
				const minute = parseInt((allTime % 3600) / 60);
				const second = allTime % 60;
				this.dataObj['remainExamTime'] = hour +'小时' + minute + '分' + second + '秒';
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.question-result{
		box-sizing: border-box;
		min-height: 530rpx;
		padding-top: 10rpx;
		background-position: center top;
		background-repeat: no-repeat;
		background-size: 100% 520rpx;
		background-image: url(../../static/images/question/result.png);
		.info{
			color: #FFFFFF;
			padding: 0 90rpx 0 72rpx;
			.name{
				line-height: 56rpx;
				font-size: 40rpx;
			}
			.data{
				line-height: 30rpx;
				font-size: 22rpx;
				margin-top: 14rpx;
			}
			.score{
				height: 152rpx;
				font-size: 44rpx;
				text-align: right;
				.number{
					line-height: 152rpx;
					font-size: 110rpx;
				}
			}
			.tips{
				height: 44rpx;
				font-size: 32rpx;
				text-align: right;
				margin-bottom: 36rpx;
			}
		}
		.block{
			width: 678rpx;
			margin: 0 auto;
			.test-title{
				line-height: 44rpx;
				font-size: 32rpx;
				color: #1A1A1A;
				margin-bottom: 8rpx;
			}
			.test-name{
				line-height: 36rpx;
				font-size: 24rpx;
				color: #7F7F7F;
				margin-bottom: 40rpx;
			}
			.result{
				height: 110rpx;
				font-size: 0;
				margin-bottom: 40rpx;
				.result-item{
					box-sizing: border-box;
					width: 300rpx;
					line-height: 110rpx;
					font-size: 30rpx;
					background-color: #F7F7F7;
					.text{
						box-sizing: border-box;
						position: relative;
						width: 150rpx;
						height: 110rpx;
						vertical-align: middle;
					}
				}
				.right{
					float: left;
					color: #1BB682;
					text-align: right;
					padding: 0 40rpx 0 24rpx;
					border-top-left-radius: 22rpx;
					border-bottom-left-radius: 22rpx;
					.text{
						float: left;
						text-align: left;
						padding-left: 60rpx;
						&::before{
							content: '';
							position: absolute;
							top: 50%;
							margin-top: -24rpx;
							left: 0;
							width: 48rpx;
							height: 48rpx;
							background-position: center center;
							background-repeat: no-repeat;
							background-size: 100% 100%;
							background-image: url(../../static/images/common/hook.png);
						}
					}
				}
				.wrong{
					float: right;
					color: #F21B3F;
					text-align: left;
					padding: 0 24rpx 0 40rpx;
					border-top-right-radius: 22rpx;
					border-bottom-right-radius: 22rpx;
					.text{
						float: right;
						text-align: right;
						padding-right: 60rpx;
						&::before{
							content: '';
							position: absolute;
							top: 50%;
							margin-top: -24rpx;
							right: 0;
							width: 48rpx;
							height: 48rpx;
							background-position: center center;
							background-repeat: no-repeat;
							background-size: 100% 100%;
							background-image: url(../../static/images/common/fork.png);
						}
					}
				}
			}
			.btn{
				height: 90rpx;
				margin-bottom: 18rpx;
				.btn-item{
					width: 292rpx;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 30rpx;
					text-align: center;
					border-radius: 45rpx;
				}
				.left{
					float: left;
					color: $color-common;
					background-color: #F7F7F7;
				}
				.right{
					float: right;
					color: #FFFFFF;
					background-color: $color-common;
				}
			}
		}
	}
</style>
